<!-- 右侧信息 -->
<template>
  <div id=''>
    <div class="details">
      <div class="de-header">
        <div class="de-img">
          <img :src="MY_URL[detail.type]"
               alt="">
        </div>
        <p class="de-name">{{detail.name}}</p>
        <div class="de-size">
          <span>{{detail.size | sizeFormat}}</span><span>{{detail.creation | getSTime}}</span>
        </div>
      </div>
      <div style="flex:1;display:flex;flex-direction: column;">
        <!-- v-model="drawerId" 这里需要封装成内部的属性 -->
        <el-tabs @tab-click="handleClickTab">
          <el-tab-pane label="共享"
                       name="1">
            <div class="share">
              <div class="pl15 pr15">
                <div class="share-input fc">
                  <el-select v-model="shareInput"
                             multiple
                             filterable
                             remote
                             reserve-keyword
                             placeholder="姓名或电子邮箱地址"
                             :remote-method="remoteMethod"
                             :loading="loading">
                    <el-option v-for="item in options"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"
                               style="height:46px;padding-top:4px">
                      <div class="shareList-img">
                        <img :src="item.url"
                             alt="">
                        <span>{{item.label}}</span>
                      </div>
                    </el-option>
                  </el-select>
                  <i class="el-icon-right"
                     @click="handleShare"></i>
                </div>
              </div>
              <div class="sharePep-box">
                <ul class="sharePep-Li">
                  <li v-for="(item,index) in shareList"
                      :key="index">
                    <div style="display:flex;align-items:center">
                      <div>
                        <img :src="item.url"
                             alt="">
                      </div>
                      <p>{{item.name}}</p>
                    </div>
                    <el-dropdown trigger="click">
                      <span class="el-dropdown-link">
                        <i class="el-icon-more"></i>
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>设置过期日期</el-dropdown-item>
                        <el-dropdown-item>备注</el-dropdown-item>
                        <el-dropdown-item>取消共享</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </li>
                </ul>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="动态"
                       name="2">
            <div class="journal">
              <ul>
                <li v-for="(item,index) in detail.journal"
                    :key="index">
                  <div class="journal-con">
                    <span class="user">{{item.user}}</span>
                    {{JOU_MODE[item.type]}} {{item.file}}
                  </div>
                  <span class="journal-time">{{item.time | getSTime}}</span>
                </li>
              </ul>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>

import { MY_URL, JOU_MODE } from '@/utils/constants';
import Abcdefg from '@/static/img/11.png';
import atrtresv from '@/static/img/44.png';
import Efkloiu from '@/static/img/22.png';
import img4 from '@/static/img/33.png';

export default {
  components: {},
  data() {
    return {
      MY_URL,
      JOU_MODE,
      shareInput: '',
      activeName: '1',
      shareList: [],
      options: [],
      optionsList: [],
      loading: false,
      states: [
        {
          id: 1,
          name: 'Abcdefg',
          url: Abcdefg,
        },
        {
          id: 2,
          name: 'atrtresv',
          url: atrtresv,
        },
        {
          id: 3,
          name: 'Efkloiu',
          url: Efkloiu,
        },
        {
          id: 4,
          name: '345678@98',
          url: img4,
        },
        {
          id: 5,
          name: '163.com',
          url: atrtresv,
        },
        {
          id: 6,
          name: 'Villinyz',
          url: Efkloiu,
        },
      ],

    };
  },
  props: {
    detail: {
      type: Object,
      default: (() => ({
        type: 'folder',
        name: '新建文件夹',
        size: '123KB',
        modification: 'today',
      })),
    },
    drawerId: {
      type: String,
      default: '1',
    },
  },
  created() {

  },
  mounted() {
    this.optionsList = this.states.map((item) => ({ value: `${item.id}`, label: `${item.name}`, url: `${item.url}` }));
  },
  computed: {},
  watch: {},
  methods: {
    handleClickTab() { },
    handleShare() {
      if (this.shareInput.length > 0) {
        this.states.forEach((item) => {
          this.shareInput.forEach((j) => {
            if (j === item.id) {
              this.shareList.push(item);
            }
          });
        });
        this.shareInput = '';
        this.options = [];
      }
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.optionsList.filter((item) => item.label.toLowerCase()
            .indexOf(query.toLowerCase()) > -1);
        }, 200);
      } else {
        this.options = [];
      }
    },

  },
};
</script>
<style lang='scss' scoped>
.details {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  text-align: start;
  .de-header {
    margin-top: 23px;
    margin-left: 20px;
  }
  .de-img {
    max-width: 60px;
    height: 42px;
    & > img {
      max-width: 60px;
      height: 42px;
    }
  }
  .de-name {
    margin: 14px 0 6px 0;
    font-size: 14px;
    color: #020233;
  }
  .de-size {
    margin-bottom: 20px;
    & > span {
      margin-right: 15px;
      font-size: 13px;
      color: #697581;
    }
  }
  .share {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    .share-input {
      width: 100%;
      border: 1px solid #e4e8f1;
      border-radius: 8px;
      align-items: center;
    }
    .share-input /deep/ .el-select {
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
      overflow-x: auto;
    }
    .share-input /deep/ .el-input__inner {
      border: none;
    }
    .share-input /deep/ .el-select__tags {
      overflow-x: auto;
    }
    .share-input /deep/.el-tag.el-tag--info .el-tag__close {
      color: #fff;
    }
    .el-icon-right {
      margin-right: 10px;
      color: #51a8ff;
      font-size: 26px;
      cursor: pointer;
    }
  }
}
.details /deep/ .el-tabs {
  // height: 100%;
  flex: 1;
}
.details /deep/ .el-tabs__content {
  height: 100%;
}
.details /deep/ .el-tab-pane {
  height: 100%;
}
.shareList-img {
  display: flex;
  align-items: center;
  & > img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
  }
}
.sharePep-box {
  flex: 1;
  // height: 100%;
  // overflow-y: auto;
}
.sharePep-Li {
  height: 100%;
  overflow-y: auto;
  // margin-top: 24px;
  padding: 20px 16px;
  & > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    & img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 10px;
    }
    & p {
      font-size: 16px;
      color: #020233;
    }
  }
  .el-icon-more {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 30px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s linear;
  }
  .el-icon-more:hover {
    background: rgba(0, 0, 0, 0.05);
  }
}
.details /deep/ .el-tabs__item:focus.is-active.is-focus:not(active) {
  box-shadow: none;
}
.details /deep/ .el-tabs__item {
  color: #878f97;
  padding-left: 20px !important;
}
.details /deep/ .el-tabs__item:hover {
  color: #020233;
}
.details /deep/ .is-active {
  color: #020233;
}
#app-box /deep/ .el-drawer {
  outline: none;
}

.journal {
  width: 100%;
  height: 100%;
  & > ul {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 16px 16px 16px;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #f3f6fa;
      border-radius: 4px;
      box-sizing: border-box;
      padding: 12px 16px;
      margin-bottom: 12px;
      .journal-con {
        font-family: PingFang-SC-Medium;
        font-size: 14px;
        color: #02020f;
      }
      .user {
        font-family: PingFang-SC-Regular;
        font-size: 14px;
        color: #020221;
      }
      .journal-time {
        font-size: 12px;
        color: #878f97;
      }
    }
  }
}
</style>
